<template>
    <div class="MyContainer">
        <div class="doctor-info" style="text-align:center;">医生信息管理</div>       
        <div class="mt-4">
          <el-input style="width: 400px" size="large" v-model="input" placeholder="请输入医生姓名" class="input-with-select">
            <template #append><el-button :icon="Search" @click="doctorName"/></template>
          </el-input>
          <el-button type="primary"  style="float:right;margin-right: 12px;" size="large" @click="doctorAll">查询全部</el-button>
        </div>

        <el-table :data="tableData" style="margin-top:25px" :default-sort="{ prop: 'docOld', order:null }">
            <el-table-column label="姓名" prop="docName" width="105">
                <template #default="scope"><span>{{ scope.row.docName }}</span></template>
            </el-table-column>
            <el-table-column label="年龄" prop="docOld" width="85" sortable>
                <template #default="scope"><span>{{ scope.row.docOld }}</span></template>
            </el-table-column>
            <el-table-column prop="docGender" label="性别" :filters="[{ text: '男', value: '男' },{ text: '女', value: '女' },]"
                            :filter-method="filterTag" filter-placement="bottom-end" width="130">
                <template #default="scope"><span>{{ scope.row.docGender }}</span></template>
            </el-table-column>
            <el-table-column label="密码" prop="docPswd" width="220" >
                <template #default="scope"><span>{{ scope.row.docPswd }}</span>
                    <el-popconfirm @confirm="chanagePsw(scope.$index)" width="220" confirm-button-text="确定" cancel-button-text="取消" 
                                    :icon="InfoFilled" icon-color="#626AEF" title="请确认是否重置密码?">
                        <template #reference>
                            <el-button type="danger" style="float: right;" circle ><el-icon><EditPen /></el-icon></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column label="身份证号码" prop="docIdentification" width="200">
                <template #default="scope"><span>{{ scope.row.docIdentification }}</span></template>
            </el-table-column>
            <el-table-column label="学历" prop="docDegree" width="75">
                <template #default="scope"><span>{{ scope.row.docDegree }}</span></template>
            </el-table-column>
            <el-table-column label="所属医院" prop="docHospital" width="200">
                <template #default="scope"><span>{{ scope.row.docHospital }}</span></template>
            </el-table-column>
            <el-table-column label="领域" prop="docDepartment" width="100">
                <template #default="scope"><span>{{ scope.row.docDepartment }}</span></template>
            </el-table-column>
            <el-table-column label="科室" prop="docSecdepartment" width="200">
                <template #default="scope"><span>{{ scope.row.docSecdepartment }}</span></template>
            </el-table-column>
            <el-table-column label="电话号码" prop="docPhonenum" width="200">
                <template #default="scope"><span>{{ scope.row.docPhonenum }}</span></template>
            </el-table-column>
            <el-table-column label="特长" prop="docSpeciality" width="200">
                <template #default="scope"><span>{{ scope.row.docSpeciality }}</span></template>
            </el-table-column>
            <el-table-column label="备注" prop="docRemark" width="100">
                <template #default="scope"><span>{{ scope.row.docRemark }}</span></template>
            </el-table-column>
            
            <el-table-column align="right" width="120" fixed="right">
                <template #header>
                    <el-button type="primary" @click="dialogFormVisible = true" style="width: 100%">
                        <el-icon style="margin-right:5px"><Plus /></el-icon>添加
                    </el-button>
                </template>
                <template #default="scope">
                    <!-- <div v-if="activeIndex == scope.$index">
                        <el-button type="info" @click="handleSave(scope.$index)" style="width: 100%">保存信息</el-button>
                    </div> -->
                    <div>
                        <el-button type="success" @click="Edit(scope.$index);dialogFormVisible_edit = true" style="width: 100%" >编辑</el-button>
                        <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定" cancel-button-text="取消" 
                                        :icon="InfoFilled" icon-color="#626AEF" title="请确认是否删除该医生信息?">
                            <template #reference>
                                <el-button type="danger" style="width: 100%;margin-top:8px;margin-left:0px">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogFormVisible" title="请填写医生信息" draggable>
            <div class="demo-input-suffix">
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">姓名</span>
                    <el-input v-model="input_name" class="w-50 m-2" placeholder="必填项" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">年龄</span>
                    <el-input v-model="input_old" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">性别</span>
                    <el-select v-model="input_gender" class="w-50 m-2">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">密码</span>
                    <el-input v-model="input_psw" class="w-50 m-2" placeholder="必填项" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">学历</span>
                    <el-input v-model="input_degree" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">所属医院</span>
                    <el-input v-model="input_hos" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">领域</span>
                    <el-input v-model="input_dep" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">科室</span>
                    <el-input v-model="input_sec" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">电话号码</span>
                    <el-input v-model="input_tel" class="w-50 m-2"  />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">身份证号码</span>
                    <el-input v-model="input_iden" class="w-50 m-2" placeholder="必填项" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">特长</span>
                    <el-input v-model="input_spec" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">备注</span>
                    <el-input v-model="input_remark" class="w-50 m-2" />
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="large">取消</el-button>
                    <el-button type="primary" @click="handleAdd();dialogFormVisible = false" size="large">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- Edit -->
        <el-dialog v-model="dialogFormVisible_edit" title="请填写医生信息" :passdata="tableData_dia" draggable open="Edit">
            
            <div class="demo-input-suffix">
                
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">姓名</span>
                    <el-input v-model="tableData_dia[1].docName" class="w-50 m-2" placeholder="必填项">
                    </el-input>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">年龄</span>
                    <el-input type="number" v-model="tableData_dia[1].docOld" class="w-50 m-2"/>
                        <!-- <el-input v-if="activeIndex == scope.$index" v-model="scope.row.docName" placeholder="必填项" class="w-50 m-2"></el-input>
                        <span v-else>{{ scope.row.docName }}</span>
                        <span class="ml-3 w-35 text-gray-600 inline-flex items-center">年龄</span>
                        <el-input type="number" v-if="activeIndex == scope.$index" v-model="scope.row.docOld" class="w-50 m-2"></el-input>
                        <span v-else>{{ scope.row.docOld }}</span> -->
                </el-row>
         
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">性别</span>
                    <el-select v-model="tableData_dia[1].docGender" class="w-50 m-2">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">密码</span>
                    <el-input v-model="tableData_dia[1].docPswd" class="w-50 m-2" placeholder="必填项" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">学历</span>
                    <el-input v-model="tableData_dia[1].docDegree" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">所属医院</span>
                    <el-input v-model="tableData_dia[1].docHospital" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">领域</span>
                    <el-input v-model="tableData_dia[1].docDepartment" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">科室</span>
                    <el-input v-model="tableData_dia[1].docSecdepartment" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">电话号码</span>
                    <el-input v-model="tableData_dia[1].docPhonenum" class="w-50 m-2"  />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">身份证号码</span>
                    <el-input v-model="tableData_dia[1].docIdentification" class="w-50 m-2" placeholder="必填项" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">特长</span>
                    <el-input v-model="tableData_dia[1].docSpeciality" class="w-50 m-2" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">备注</span>
                    <el-input v-model="tableData_dia[1].docRemark" class="w-50 m-2" />
                </el-row>
            
            </div>
            <!-- <template #footer> -->
              <span class="dialog-footer">
                    <el-button @click="dialogFormVisible_edit = false" size="large">取消</el-button>
                    <el-button type="primary" @click="handleEdit(tableData_dia[1].docId);dialogFormVisible_edit = false" size="large">确定</el-button>
                </span>  
            <!-- </template> -->
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { getAlldoctorInfo,getAdmDocInfo,addAdmDocInfo,deldoctor } from '../../api/manager';
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { sortOrders } from 'element-plus/es/components/table-v2/src/constants';
import { INPUT_EVENT } from 'element-plus';

interface TableItem {
    docId:number | string;
    docName: string;
    docOld: number;
    docGender: string;
    docPswd: string;
    docDegree: string;
    docHospital: string;
    docDepartment:string;
    docSecdepartment: string;
    docPhonenum: string;
    docIdentification: string;
    //avatar:string;
    docSpeciality:string;
    docRemark:string;
}

const input = ref('');

const tableData = ref<TableItem[]>([])
const tableData_dia = ref<TableItem[]>([])
// let userData: iUser[] = reactive([{}]);
const getData = () => {
  getAlldoctorInfo().then(res=>{
    //console.log("所有医生信息",res.data)
    if(res.code == 200){
        tableData.value=res.data     
        }
    }).catch(err=>{console.log("请求失败")})
};
getData();

//名字查询
const doctorName = () =>{
    //const name=ref('')
    getAdmDocInfo(input.value).then(res=>{
        console.log("所有医生信息",input.value)
        //var doc = res.data
        //console.log("所有医生信息",doc[0].docName)
        tableData.value=res.data
    }).catch(err=>{console.log("请求失败")})
}

//筛选性别
const filterTag = (value: string, row: TableItem) => {
  return row.docGender === value
}

//一键查询所有
const doctorAll = () =>{
    getData()
}
let activeIndex = ref<number>(-1);


const dialogFormVisible_edit = ref(false)

// 编辑行
const handleEdit = (index: number) => {
    activeIndex.value = index-1;
    console.log("activeIndex.value",activeIndex.value)
    //console.log("save_index:",index)
    //添加/编辑行--保存
    const tmp=tableData_dia.value[1]
    //console.log(tmp)
    if(tmp.docName == "" || tmp.docPswd=="" || tmp.docIdentification==""){
        handleDelete(activeIndex.value)
        doctorAll()
    }else{
        delete tmp.isMyDoc
        addAdmDocInfo(tmp).then(res=>{
        //console.log("1")
        console.log("回传信息zzz: ",JSON.stringify(tmp))
        //activeIndex.value = -1;
        doctorAll()
        }).catch(err=>{console.log("fail")})
        
    }
    //console.log("edit:",tableData_dia)
    //console.log("回传信息：",JSON.stringify(tableData.value))
};
const Edit = (index:number) => {
    //const row=index
    //const tableData_dia = ref<TableItem[]>([])
    tableData_dia.value = new Array([])
    //console.log(tableData.value[index])
    tableData_dia.value.push(tableData.value[index])
    //console.log("index",index)
    //console.log(tableData_dia)
    //return row
    
}

//const dialogTableVisible_Add = ref(false)
const dialogFormVisible = ref(false)

const input_name=ref(''),input_old=ref(''),input_gender=ref(''),input_degree=ref(''),input_dep=ref(''),input_hos=ref(''),input_iden=ref('')
const input_psw=ref(''),input_remark=ref(''),input_sec=ref(''),input_spec=ref(''),input_tel=ref('')
// 新增行
const handleAdd = function () {
    
    //handleEdit(tableData.value.length+1)
    const item = {
        docId:'',
        docName: input_name.value,
        docOld: input_old.value,
        docGender: input_gender.value,
        docPswd: input_psw.value,
        docDegree: input_degree.value,
        docHospital: input_hos.value,
        docDepartment: input_dep.value,
        docSecdepartment: input_sec.value,
        docPhonenum: input_tel.value,
        docIdentification: input_iden.value,
        //avatar: ref(''),
        docSpeciality: input_spec.value,
        docRemark: input_remark.value,
    };
    activeIndex.value = tableData.value.length;
    console.log("index==>",activeIndex.value)
    console.log(item.docName)
    //console.log("回传信息：",JSON.stringify(tableData.value))
    if(item.docName === '' || item.docPswd=="" || item.docIdentification==""){
        //handleDelete(activeIndex.value)
        //console.log("回传信息1:",JSON.stringify(tableData.value))
        doctorAll()
    }else{
        addAdmDocInfo(item).then(res=>{
        //console.log("1")
        console.log("回传信息2:",tableData.value)
        tableData.value.push(item);
        doctorAll()
        //activeIndex.value = -1;
        }).catch(err=>{console.log("fail")})
        //doctorAll()
    }
    
};


// 删除行
const handleDelete = function (index: number) {
    const id=tableData.value[index].docId
    tableData.value.splice(index, 1);
    //console.log(typeof(index))
    //const id=tableData.value[index].docId
    console.log(id)
    deldoctor(id).then(res=>{
         console.log("回传信息：",id)
         doctorAll()
    //     //console.log(tableData.value)
    }).catch(err=>{console.log("fail")})
    //console.log("当前行:",index)
};

// 保存行
const handleSave = (index:number) => {
    //activeIndex.value = -1;
    //console.log("save_index:",index)

    const tmp=tableData.value[index]
    if(tmp.docName == "" || tmp.docPswd=="" || tmp.docIdentification==""){
        handleDelete(activeIndex.value)
        doctorAll()
    }else{
        delete tmp.isMyDoc
        addAdmDocInfo(tmp).then(res=>{
        //console.log("1")
        console.log("回传信息-重置：",JSON.stringify(tmp))
        activeIndex.value = -1;
        doctorAll()
        }).catch(err=>{console.log("fail")})
    }
};


//重置密码
const chanagePsw = (index: number) => {
    //const psw=tableData.value[index].docPswd
    //console.log(psw)
    tableData.value[index].docPswd ='1234'
    //console.log(tableData.value[index].docPswd)
    handleSave(index)
    ElMessage({
        type: 'success',
        message: '重置成功',
    })
};
</script>

<style scoped>
.doctor-info {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>